<template>
	<view class="page">
		<!-- 待付款 -->
		 <view class="tit-box" v-if="show_menu > 0 && show_menu !== 9">
			 <view class="tit-list" :class="{'active':show_menu>0}">
			 	<view class="arc">
					<view class="arc-small"></view>
					<view class="arc-big"></view>
				</view>
			 	<view class="">待付款</view>			 
			 </view>
			 <view class="tit-list" :class="{'active':show_menu>1}">
			 	<view class="arc">
					<view class="arc-small"></view>
					<view class="arc-big"></view>
					<view class="arc-line"></view>
				</view>
			 	<view class="">待发货</view>			 
			 </view>
			 <view class="tit-list" :class="{'active':show_menu>2}">
			 	<view class="arc">
					<view class="arc-small"></view>
					<view class="arc-big"></view>
					<view class="arc-line"></view>
				</view>
			 	<view class="">待收货</view>			 
			 </view>
			 <view class="tit-list" :class="{'active':show_menu>3}">
			 	<view class="arc">
					<view class="arc-small"></view>
					<view class="arc-big"></view>
					<view class="arc-line"></view>
				</view>
			 	<view class="">已完成</view>	
			 </view>
		 </view>
		 <view class="" style="width: 100%;height: 10upx;" v-if="show_menu == -1"></view>
		 <view class="big-box">
			 <view class="list">
				 <view class="user">
					 <view class="name">{{order_info.delivery.consignee}}</view>
					 <view class="phone">{{order_info.delivery.tel}}</view>
				 </view>
				 <view class="address">{{order_info.delivery.province}}{{order_info.delivery.city}}{{order_info.delivery.area}}{{order_info.delivery.address}}</view>
			 </view>
			 <view class="list">
			 	<view class="order-tit">
			 		<view class="order-name">订单信息</view>
			 		<view class="order-num">订单号：{{order_info.order_no}}</view>		 					 
			 	</view>
			 	<view class="order-time">
					<text>下单时间</text>
					<text class="other-color">{{ utils.timeTodate('Y-m-d H:i', order_info.create_time*1000) }}</text>
				</view>	
				<view class="order-time" >
					<text>配送方式</text>
					<text class="other-color">物流配送</text>
				</view>	
				<view class="order-time" v-if="show_menu>2  && show_menu!=9">
					<text>物流订单号：</text>
					<text class="other-color">123456789</text>
					<text>复制</text>
				</view>			 
			 </view>
			 <view class="list">
				 <view class="item-box">
				 	<view class="item-title">
				 		<view class="shop-ico"><image lazy-load="true"  src="../../static/images/shop-ico.png" class="shop-ico"></image></view>
				 		<view class="shop-name">{{order_info.goods_list[0].store_name}}</view>
				 	</view>
				 	<view class="item">
				 		<view class="item-info">
				 			<view class="item-img">
				 				<image lazy-load="true"  :src="order_info.goods_list[0].sku_thumbnail" mode="aspectFit" class="item-img"></image>
				 			</view>
				 			<view class="item-text">
				 				<view class="title">{{order_info.goods_list[0].sku_name}}</view>
				 				<view class="type">
				 					<view>规格</view>
				 					<view class="size">{{order_info.goods_list[0].sku_spec}}</view>
				 				</view>
				 				<view class="price-amount">
				 					<view class="price">￥{{order_info.goods_price}}</view>
				 					<view class="amount">
				 						<view class="times">(共{{order_info.goods_list[0].count}}件商品)</view>
				 					</view>
				 				</view>
				 			</view>
				 		</view>
				 	</view>
				 </view>
			 </view>
			 <view class="list">
			 	<view class="order-tit">
			 		<view class="order-name">付款金额</view>	 					 
			 	</view>
			 	<view class="order-time">
			 		<text>商品价格</text>
					<text class="other-color">{{order_info.goods_price}}</text>
			 	</view>	
			 	<view class="order-time" >
			 		<text>物流费用</text>
			 		<text class="other-color">{{order_info.delivery_cost}}</text>
			 	</view>	
			 	<view class="order-time">
			 		<text>实付金额</text>
			 		<text class="other-color">{{order_info.real_payments}}</text>
			 	</view>		
			 </view>
			 <view class="list small-font">
				 {{order_info.remark}}
			 </view>
			 <view class="list small-font" v-if="show_menu>2 && show_menu!=9">
			 	{{order_info.b_remark}}		 
			 </view>
		 </view>
		 <view class="empty"></view>
		 <view class="bot-btn" v-if="show_menu !== 2">
			 <image lazy-load="true"  src="../../static/images/paypay.png"  @click="payMoney(order_info.pay_param)" class="btn" v-if="show_menu == 1"></image>
			 <image lazy-load="true"  src="../../static/images/sure-take.png" @click="receipt(order_info.id)" class="btn" v-if="show_menu == 3"></image> 
			 <image lazy-load="true"  src="../../static/images/share-img-1.png"  @click="goPost" class="btn-share" v-if="show_menu == 5"></image> 
			 <image lazy-load="true"  src="../../static/images/pay-again.png"  @click="goAgain(order_info.goods_list[0].store_sku_id)" class="btn" v-if="show_menu == 9"></image> 
		 </view>
	</view>
</template>

<script>
	import utils from '@/components/shoyu-date/utils.filter.js';
	export default {
		data() {
			return {
				show_menu:-1,
				order_id:0,
				order_info:{},
				utils: utils,
			}
		},
		onLoad(e) {
			var self = this;
			self.order_id = e.id;
			
			self.$request.request({
				url:'/order/info',
				data:{
					order_id:e.id
				},
				success:function(res){
					console.log(res)
					if(res.code==200){
						var x = res.result;
						x.create_time = new Date(x.create_time).getTime();
						x.real_payments = self.$money(x.real_payments);
						x.goods_price = self.$money(x.goods_price);
						x.delivery_cost = self.$money(x.delivery_cost);
						
						x.goods_list.forEach((val,key)=>{
						x.goods_list[key].sku_thumbnail = self.$http_img(val.sku_thumbnail)
						})
						self.order_info = x;
						self.show_menu = x.status;
					}else{
						
					}
				}
			});
			// #ifdef H5
			let share_time_line={
				title:self.$request.h5_share_name, // 分享标题
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '我发现了一个很不错的商城，买家具有超大实惠！', // 分享描述
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			// #endif
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {
		      console.log(res.target)
		    }
		    return {
		      title: this.$request.share_title,
		      path: '/pages/index/index'
		    }
		  },
		methods: {
			receipt(id){
				var self = this;
				uni.showModal({
				    title: '确认收到货了吗？',
				    content: '为保障您的权益，请收到货确认无误后，再确认收货哦~',
					confirmText:'确认收货',
				    success: function (res) {
				        if (res.confirm) {
				            self.$request.request({
				            	url:'/order/receipt',
				            	data:{
				            		order_id:id
				            	},
				            	success:function(res){
				            		console.log(res)
				            		if(res.code==200){
				            			uni.showToast({
				            			    title: '确认收货成功！',
				            			    duration: 2000
				            			});
				            			setTimeout(function() {
				            				uni.redirectTo({
				            				    url: '../my-order/my-order?id=5'
				            				});
				            			}, 2000);
				            			
				            		}else{
				            			
				            		}
				            	}
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			payMoney(param){
				console.log(param)
				uni.requestPayment({
					timeStamp:param.timeStamp,
					nonceStr:param.nonceStr,
					package:param.package,
					signType:param.signType,
					paySign:param.paySign,
					success:function () {
						uni.showToast({
						    title: '支付成功！',
						    duration: 2000
						});
						setTimeout(function() {
							uni.redirectTo({
							    url: '../my-order/my-order?id=2'
							});
						}, 2000);
					},
					fail:function () {
						uni.showToast({
						    title: '支付失败，请稍后重试',
							icon: 'none',
						    duration: 2000
						});
						setTimeout(function() {
							uni.redirectTo({
							    url: '../my-order/my-order?id=1'
							});
						}, 2000);
					}
						
				})
			},
			goAgain(id){
				uni.redirectTo({
				    url: '../shopping-cart/shopping-cart?id='+id
				});
			},
			goPost(){
				uni.redirectTo({
				    url: '../post/post'
				});
			}
		}
	}
</script>

<style>
@import url("order-details.css");
</style>
